<template>
  <div class="auton">
    <!-- 导航条以及外壳 -->
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item herf="" @click.native="$router.push('/')">首页</a-breadcrumb-item>
        <a-breadcrumb-item href="" @click.native="$router.push('/safeguarding')">生活维权</a-breadcrumb-item>
        <a-breadcrumb-item style="color: #FFBE37">真实案例</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="top cOsingleCF">
      <ul>
        <li
          :class="{ active: selnumber == index }"
          @click="selColor(index)"
          v-for="(item, index) in nameData"
          :key="index"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="dlex2-div" style="width: 335px">
        <a-input
          style="width: 250px; height: auto !important"
          v-model="msgons"
          placeholder="请输入关键字"
          class="searchInput"
        />
        <div
          class="searchIcon"
          style="padding: 7.5px; widtn: 70px; height: auto; width: auto"
          @click="searchSel()"
        >
          <img style="width: 16px" src="@/assets/image/icon1.png" alt="" />
          <span>搜索</span>
        </div>
      </div>
    </div>
    <div class="center coRsingleCF">
      <div
        class="listDiv"
        @click="goDetail(item.lifeSafNo, '案例')"
        v-for="(item, i) in SpreadList"
        :key="i"
      >
        <span class="ltxt1">{{ item.title }}</span>
        <span class="titleTxt7 multiline">{{ item.abstracts }}</span>
        <span style="font-size: 14px" class="titleTxt6">{{
          item.publishDate
        }}</span>
      </div>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 50px auto"
        v-if="SpreadList.length < 1"
      />
    </div>
    <div class="bottom">
      <!-- -->
      <div class="cnBottom" v-if="SpreadList.length > 9">
        <div style="margin: 0 auto; width: 230px">
          <a-button @click="more()" v-show="btnState == 1" class="sobtn"
            >点击加载更多</a-button
          >
          <a-button v-show="btnState == 2" class="sobtn" :loading="true"
            >正在加载中</a-button
          >
          <span class="timeTxt1" v-if="btnState == 3">没有更多了</span>
        </div>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>


<script>
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      selnumber: 0,
      btnState: 1,
      msgons: "",
      SpreadList: [],
      pageIndex: 1,
      code: "",
      //
      nameData: ["损害赔偿", "劳动纠纷", "责任纠纷", "婚姻纠纷", "保险纠纷"],
      onLoading:false
    };
  },
  methods: {
    // 输入框的回调
    inputsel(e) {
      if (e.data == null) {
        this.SpreadList = [];
        this.pageIndex = 1;
        this.getlifesafeguardList(1);
      }
    },
    // 搜索

    searchSel() {
      this.pageIndex = 1;
      // 检测定时器
      if (this.timer) {
        // 如果有定时器,则清除
        clearTimeout(this.timer);
        this.timer = null;
      }
      // 设置定时器和事件
      this.timer = setTimeout(() => {
        this.SpreadList = [];
        this.getlifesafeguardList(1);
      }, 500);
    },
    // 跳转详情页
    goDetail(id, type) {
      this.$router.push("/details/details?id=" + id + "&from=4&type=" + type);
    },
    // 查询分类接口
    selEducation() {
      this.onLoading = true
      this.$ajax({
        url: "news/code/list/name?codeType=15",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false
          this.nameData = res.data;
          this.code = res.data[0].code;
          this.getlifesafeguardList(1);
          // 查询课程
          // console.log(this.nameData);
        }else{
          this.onLoading = false
        }
      });
    },
    // 选中样式函数
    selColor(e) {
      this.msgons = "";
      this.SpreadList = [];
      this.pageIndex = 1;
      // console.log(e);
      this.selnumber = e;
      if (e == null) {
        this.code = null;
        this.getlifesafeguardList(this.pageIndex);
      } else {
        this.code = this.nameData[e].code;
        this.getlifesafeguardList(this.pageIndex);
      }
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.getlifesafeguardList(this.pageIndex);
    },

    // 获取生活维权列表
    getlifesafeguardList(e) {
      this.onLoading = true
      let ber = [];
      this.$ajax({
        url: "/news/lifesafeguard/list?pageSize=10&pageIndex=" + e,
        method: "post",
        dataType: "JSON",
        params: {
          sortNo: this.code,
          title: this.msgons,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false
          ber = res.data.list;
          for (var i in ber) {
            this.SpreadList.push(ber[i]);
          }
          // 判断查询数据的长度
         if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        }else{
          this.onLoading = false
        }
      });
    },
  },
  created() {
    this.selEducation();
  },
};
</script>

<style lang="less" scoped>
.active {
  color: #eeb336 !important;
  font-weight: 600;
}
.top {
  background-color: #ffffff;
  padding: 12px 24px;
  margin: 0 auto;
  width: 1200px;
  display: flex;
  align-items: center;
  ul {
    display: block;
    flex: 1;
    li {
      width: 64px;
      height: 22px;
      margin-right: 30px;
      font-size: 16px;
      font-family: PingFang SC;
      color: #333333;
    }
  }
}
.center {
  .listDiv {
    margin-top: 20px;
    width: 590px;
    margin-left: 20px;
    background: #ffffff;
    padding: 24px 25px;
    cursor: pointer;
    float: left;
    .ltxt1 {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333333;
    }
    .titleTxt7 {
      margin: 16px 0;
      -webkit-line-clamp: 2;
      line-height: 28px;
    }
  }
  .listDiv:nth-child(2n-1) {
    margin-left: 0px;
  }
}
.timeTxt1 {
  text-align: center;
}
</style>
